<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px;">
        <ul id="wu-category-tree" class="easyui-tree"></ul>
    </div>
    <div data-options="region:'center',border:false,split:true">
        <!-- Begin of toolbar -->
        <div id="wu-toolbar">
            <div class="easyui-panel" title="查询区域" style="padding:5px;background:#fafafa;">
                <label>起始时间：</label><input class="easyui-datebox" style="width:150px">
                <label>结束时间：</label><input class="easyui-datebox" style="width:150px">
                <label>用户组：</label>
                <select class="easyui-combobox" panelHeight="auto" style="width:150px">
                    <option value="0">选择用户组</option>
                    <option value="1">黄钻</option>
                    <option value="2">红钻</option>
                    <option value="3">蓝钻</option>
                </select>
                <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
            </div>

            <div id="tb" style="height:auto">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:void(0)">新增</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="javascript:void(0)">编辑</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="javascript:void(0)">删除</a>
            </div>
        </div>
        <!-- End of toolbar -->
        <table id="wu-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
    </div>
</div>

<!-- End of easyui-dialog -->
<script type="text/javascript">

    /**
     * 载入菜单树
     */
    $('#wu-category-tree').tree({
        url:'./mock/menu.json',
        onClick:function(node){
            console.log(node.text);
        }
    });

    /**
     * 载入列表数据
     */
    $('#wu-datagrid').datagrid({
        url:'./mock/datagrid.json',
        loadFilter:pagerFilter,
        rownumbers:true,
        singleSelect:false,
        pageSize:20,
        pagination:true,
        multiSort:true,
        fitColumns:true,
        fit:true,
        columns:[[
            { field:'ck',checkbox:true},
            { field:'productid',title:'productid',width:100,sortable:true},
            { field:'productname',title:'productname',width:180,sortable:true},
            { field:'unitcost',title:'unitcost',width:100},
            { field:'listprice',title:'listprice',width:100},
            { field:'attr1',title:'attr1',width:100},
            { field:'itemid',title:'itemid',width:100},
            { field:'status',title:'status',width:100}
        ]]
    });

    /**
     * 分页过滤器
     */
    function pagerFilter(data){
        if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
                dg.datagrid('loadData',data);
            }
        });
        if (!data.originalRows){
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

</script>